<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="轻量级 web 前端复合组件库。">
    <meta name="keywords" content="fybug, web, lib">
    <title>vhannels</title>
</head>
<body>

<!-- 顶栏 -->
<header class="shadow"></header>

<!-- 内容部分 -->
<section class="grid-y grid-padding-x off-canvas-content" data-off-canvas-content>
    <!-- 标题区 -->
    <tit class="cell grid-y align-center flutitle">
        <div class="cell grid-x text-center">
            <!-- 标题 -->
            <div class="cell">
                <img src="./static/img/vhannels.png" class="padding-horizontal-2" alt="icon"/>
                <!-- 简介 -->
                <h3 class="margin-bottom-3 margin-top-1 cell">轻量级 web 前端复合组件库。</h3>
            </div>

            <!-- 按钮 -->
            <div class="cell button-group no-gaps margin-top-1 align-center hollow">
                <a class="button padding-vertical-1 padding-horizontal-2" target="_blank"
                   href="https://gitee.com/fybug/vhannels"
                   style="border-radius: 999rem 0 0 999rem">
                    <h5 class="margin-bottom-0">gitee</h5></a>
                <a class="button padding-vertical-1 padding-horizontal-2" target="_blank"
                   href="https://github.com/fybug/vhannels"
                   style="border-radius: 0 9999rem 9999rem 0">
                    <h5 class="margin-0">github</h5></a>
            </div>
        </div>
    </tit>

    <!-- 介绍 -->
    <section class="cell grid-y align-center" id="bufenzhanshi">
        <section
                class="cell grid-x align-center grid-container padding-vertical-2 padding-horizontal-2">
            <h2 class="cell text-center">你可以使用的</h2>
            <hr class="cell"/>
            <div class="cell large-6 grid-x margin-vertical-2 padding-right-1">
                <h2 class="cell shrink margin-right-1"><i class="fa fa-2x fa-css3"></i></h2>
                <h4 class="cell auto">规范全局默认样式和辅助构建网页的 css 框架。</h4>
            </div>
            <div class="cell large-6 grid-x margin-vertical-2">
                <h2 class="cell shrink margin-right-1"><i class="fa fa-2x fa-smile-o"></i></h2>
                <h4 class="cell auto">可用于代替 jQuery 部分功能的全局视图控件库。</h4>
            </div>
            <div class="cell large-6 grid-x margin-vertical-2 padding-right-1">
                <h2 class="cell shrink margin-right-1"><i class="fa fa-2x fa-puzzle-piece"></i></h2>
                <h4 class="cell auto">基于上述视图控件库做的于 js 中使用的控件库。</h4>
            </div>
        </section>
    </section>

    <!-- 开始使用 -->
    <section
            class="cell grid-y padding-vertical-2 shadow radius"
            margin="horizontal" id="users">
        <h1 class="cell text-center">开始使用</h1>
        <hr class="cell"/>
        <blockquote class="cell" margin="horizontal">
            <p>前往 github/gitee 发行版下载压缩包将需要的模块引入项目即可</p>
        </blockquote>

        <!-- 控件展示 -->
        <nav class="cell grid-y" margin="horizontal">
            <h3 class="cell">浮动控件包 <small>vhannels.floatContlos</small></h3>
            <section class="cell grid-y" margin="horizontal">
                <h5 class="cell margin-bottom-1">
                    浮动消息控件
                    <small>vhannels.floatContlos.floatmessage</small>
                </h5>
                <!-- 展示按钮 -->
                <div class="cell">
                    <button class="button" name="floatmessageshow" value="load">加载消息</button>
                    <button class="button success" name="floatmessageshow" value="success">
                        成功消息
                    </button>
                    <button class="button warning" name="floatmessageshow" value="warnning">
                        警告消息
                    </button>
                    <button class="button alert" name="floatmessageshow" value="error">
                        错误消息
                    </button>
                </div>

                <!-- 清除按钮 -->
                <button class="button margin-bottom-0" name="floatmessagehide">清除消息</button>
                <!-- 展示区 -->
                <div class="cell padding-vertical-1 showdiv" id="floatmessageshow"></div>
                <hr class="cell"/>

                <!--------------------------------------------------------------------------------->

                <h5 class="cell margin-bottom-1">
                    浮动对话框控件
                    <small>vhannels.floatContlos.floatdialog</small>
                </h5>
                <!-- 展示按钮 -->
                <button class="button" name="callfloatdialog">唤起对话框</button>

                <!-- 容器监听框 -->
                <div class="cell grid-x floatdialoglister">
                    <div class="cell shrink">容器框监听</div>
                    <input type="text" class="cell auto bordered padding-horizontal-1"
                           name="floatdialoggrouplistern" value="null"/>
                </div>
                <!-- 对话框监听框 -->
                <div class="cell grid-x floatdialoglister">
                    <div class="cell shrink">对话框监听</div>
                    <input type="text" class="cell auto bordered padding-horizontal-1"
                           name="floatdialoglistern" value="null"/>
                </div>
                <!-- 展示区 -->
                <div class="cell showdiv" id="floatdialogshow"></div>
                <hr class="cell"/>

            </section>
        </nav>

        <blockquote class="cell" margin="horizontal"><p>详细使用请查看 git wiki 文档</p></blockquote>
        <section class="cell grid-y align-center grid-container">
            <div class="grid-x align-center text-center button-group">
                <a href="https://gitee.com/fybug/vhannels/wikis"
                   class="cell small-5 medium-3 padding-vertical-1 button">gitee
                    wiki</a>
                <a href="https://github.com/fybug/vhannels/wiki"
                   class="cell small-5 medium-3 padding-vertical-1 button">github
                    wiki</a>
            </div>
        </section>
    </section>

</section>

<footer class="grid-y text-center align-center">
    <div class="cell grid-x grid-margin-x align-center">
        <!-- 项目位置连接 -->
        <div class="cell medium-shrink small-12 grid-y align-center">
            <h5 class="cell"><u><a
                    href="https://github.com/fybug">github</a></u>
                / <u><a
                        href="https://gitee.com/fybug">gitee</a></u> @ fybug</h5>
        </div>
        <!-- 说明 -->
        <div class="cell shrink grid-y align-center">
            <p class="cell margin-0">vhannels by 2020</p>
            <p class="cell margin-0">web code of the 2020</p>
        </div>
    </div>
    <hr class="cell margin-bottom-0"/>
    <h4 class="margin-top-1">使用下列项目搭建</h4>
    <div class="cell grid-x align-center text-center">
        <p class="cell large-2 medium-3">Foundation v6.6.3</p>
        <p class="cell large-2 medium-3">font-awesome v4.7.0</p>
        <p class="cell large-2 medium-3"><u><a href="https://gitee.com/fybug/aout.ass">aout.ass
            v0.0.1</a></u></p>
        <p class="cell large-2 medium-3"><u><a href="https://gitee.com/fybug/vhannels">vhannels
            v0.0.1</a></u></p>
    </div>
</footer>

</body>
</html>